@import '../../../styles/mixins/typography';

.x4-resources-table {
  $big-cell: 210px;
  $small-cell: 80px;
  $cell-padding: 0.5rem;

  &__wrapper {
    width: 100%;
    overflow: auto;
  }

  &__method {
    display: block;
    text-align: center;
  }

  &__controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    max-width: calc(#{$big-cell}*2 + #{$small-cell}*9 + #{$cell-padding*20});

    .input-control {
      margin-bottom: 0.1rem;
    }
  }

  &__location {
    display: flex;
    justify-content: space-between;

    > * {
      flex: 0 0 33%;
    }
  }

  table {
    margin: 0 0 1rem;
    width: calc(#{$big-cell}*2 + #{$small-cell}*9 + #{$cell-padding*20});

    p {
      margin-bottom: 0.2rem;
    }
  }

  &__indent {
    padding-left: 1rem;
  }

  &__faction-tag {
    display: inline-block;
    width: 0.5rem;
    height: 10px;
    border-radius: 4px;
    margin-right: 0.5rem;
    background: lightgrey;
  }

  &__resource-tag {
    display: block;
    border-radius: 4px;
    border: 1px solid black;
    padding: 3px 1px 1px;
    font-weight: bold;
    text-align: center;
    width: 45px;
    color: black;
    margin-left: auto;
    filter: contrast(1.1);
  }

  &__fields {
    width: $big-cell !important;
  }

  tr {
    th {
      cursor: pointer;
    }

    td {
      width: $small-cell;
      vertical-align: middle;

      &:first-of-type {
        width: $big-cell;
      }
    }

    .text--xs {
      letter-spacing: 0;
    }

    .number {
      > span {
        border-bottom: 2px solid transparent;
        display: inline-block;
        padding: 2px;
        min-width: 24px;
        text-align: center;
      }
    }
  }
}
